<template>
  <div class="lung-health-container">
    <a-typography-title :heading="2" style="text-align: center; margin-bottom: 40px;">
      肺部健康知识科普
    </a-typography-title>

    <a-tabs default-active-key="1">
      <!-- 肺部结构与功能介绍 -->
      <a-tab-pane key="1" title="肺部结构与功能">
        <div class="section-container">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-card class="anatomy-card">
                <template #cover>
                  <div class="image-container">
                    <img src="../assets/images/lung-health/lung-anatomy.png" alt="肺部解剖结构" />
                  </div>
                </template>
                <a-typography-title :heading="4">肺部解剖结构</a-typography-title>
                <a-typography-paragraph>
                  肺脏是人体呼吸系统的主要器官，位于胸腔内，左右两侧各一个。肺部主要由以下结构组成：
                </a-typography-paragraph>
                <a-descriptions :column="1" :data="anatomyData" />
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card class="function-card">
                <a-typography-title :heading="4">肺部功能</a-typography-title>
                <a-typography-paragraph>
                  肺部是人体呼吸系统的核心器官，主要负责气体交换，包括：
                </a-typography-paragraph>
                <a-timeline>
                  <a-timeline-item>
                    <a-typography-title :heading="5">氧气吸入</a-typography-title>
                    <a-typography-paragraph>
                      通过呼吸将空气中的氧气吸入肺泡，然后氧气通过肺泡壁进入毛细血管，与血红蛋白结合被输送到全身各组织细胞。
                    </a-typography-paragraph>
                  </a-timeline-item>
                  <a-timeline-item>
                    <a-typography-title :heading="5">二氧化碳排出</a-typography-title>
                    <a-typography-paragraph>
                      细胞代谢产生的二氧化碳通过血液运输到肺部，然后通过肺泡壁进入肺泡，最后通过呼气排出体外。
                    </a-typography-paragraph>
                  </a-timeline-item>
                  <a-timeline-item>
                    <a-typography-title :heading="5">维持酸碱平衡</a-typography-title>
                    <a-typography-paragraph>
                      通过调节二氧化碳的排出量，肺部参与维持人体血液的酸碱平衡。
                    </a-typography-paragraph>
                  </a-timeline-item>
                  <a-timeline-item>
                    <a-typography-title :heading="5">防御功能</a-typography-title>
                    <a-typography-paragraph>
                      肺部具有过滤和清除吸入空气中微粒和病原体的功能，保护呼吸系统免受感染和损伤。
                    </a-typography-paragraph>
                  </a-timeline-item>
                </a-timeline>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>

      <!-- 常见肺部疾病知识 -->
      <a-tab-pane key="2" title="常见肺部疾病">
        <div class="section-container">
          <a-collapse accordion>
            <a-collapse-item header="肺炎" key="1">
              <a-card>
                <a-row :gutter="24">
                  <a-col :span="16">
                    <a-typography-title :heading="4">肺炎</a-typography-title>
                    <a-typography-paragraph>
                      肺炎是由细菌、病毒或真菌等病原体引起的肺部炎症，导致肺泡内充满液体，影响正常的气体交换。
                    </a-typography-paragraph>
                    <a-divider />
                    <a-typography-title :heading="5">主要症状</a-typography-title>
                    <a-space direction="vertical">
                      <a-tag color="red">发热</a-tag>
                      <a-tag color="red">咳嗽</a-tag>
                      <a-tag color="red">呼吸困难</a-tag>
                      <a-tag color="red">胸痛</a-tag>
                      <a-tag color="red">疲劳</a-tag>
                    </a-space>
                    <a-divider />
                    <a-typography-title :heading="5">预防方法</a-typography-title>
                    <a-typography-paragraph>
                      <ul>
                        <li>接种肺炎疫苗</li>
                        <li>勤洗手，保持良好的个人卫生习惯</li>
                        <li>避免接触患有呼吸道感染的人</li>
                        <li>保持室内通风</li>
                        <li>戒烟</li>
                      </ul>
                    </a-typography-paragraph>
                    <a-divider />
                    <a-typography-title :heading="5">治疗方法</a-typography-title>
                    <a-typography-paragraph>
                      <ul>
                        <li>抗生素治疗（细菌性肺炎）</li>
                        <li>抗病毒药物（病毒性肺炎）</li>
                        <li>对症支持治疗</li>
                        <li>严重病例可能需要住院治疗和氧疗</li>
                      </ul>
                    </a-typography-paragraph>
                  </a-col>
                  <a-col :span="8">
                    <div class="image-container">
                      <img src="../assets/images/lung-health/pneumonia.png" alt="肺炎" />
                    </div>
                  </a-col>
                </a-row>
              </a-card>
            </a-collapse-item>
            <a-collapse-item header="肺结核" key="2">
              <a-card>
                <a-row :gutter="24">
                  <a-col :span="16">
                    <a-typography-title :heading="4">肺结核</a-typography-title>
                    <a-typography-paragraph>
                      肺结核是由结核分枝杆菌引起的慢性传染病，主要侵犯肺部，但也可影响身体其他器官。
                    </a-typography-paragraph>
                    <a-divider />
                    <a-typography-title :heading="5">主要症状</a-typography-title>
                    <a-space direction="vertical">
                      <a-tag color="red">持续咳嗽（超过2周）</a-tag>
                      <a-tag color="red">咯血</a-tag>
                      <a-tag color="red">胸痛</a-tag>
                      <a-tag color="red">体重减轻</a-tag>
                      <a-tag color="red">夜间盗汗</a-tag>
                      <a-tag color="red">低烧</a-tag>
                    </a-space>
                    <a-divider />
                    <a-typography-title :heading="5">预防方法</a-typography-title>
                    <a-typography-paragraph>
                      <ul>
                        <li>接种卡介苗（BCG疫苗）</li>
                        <li>避免与活动性肺结核患者密切接触</li>
                        <li>保持良好的通风条件</li>
                        <li>增强免疫力</li>
                      </ul>
                    </a-typography-paragraph>
                    <a-divider />
                    <a-typography-title :heading="5">治疗方法</a-typography-title>
                    <a-typography-paragraph>
                      <ul>
                        <li>抗结核药物联合治疗（通常需要6-9个月）</li>
                        <li>全程规律服药，不能中断</li>
                        <li>定期复查，监测治疗效果和药物副作用</li>
                      </ul>
                    </a-typography-paragraph>
                  </a-col>
                  <a-col :span="8">
                    <div class="image-container">
                      <img src="../assets/images/lung-health/tuberculosis.png" alt="肺结核" />
                    </div>
                  </a-col>
                </a-row>
              </a-card>
            </a-collapse-item>
            <a-collapse-item header="慢性阻塞性肺疾病（COPD）" key="3">
              <a-card>
                <a-row :gutter="24">
                  <a-col :span="16">
                    <a-typography-title :heading="4">慢性阻塞性肺疾病（COPD）</a-typography-title>
                    <a-typography-paragraph>
                      慢性阻塞性肺疾病是一组以持续气流受限为特征的慢性肺部疾病，包括慢性支气管炎和肺气肿。
                    </a-typography-paragraph>
                    <a-divider />
                    <a-typography-title :heading="5">主要症状</a-typography-title>
                    <a-space direction="vertical">
                      <a-tag color="red">慢性咳嗽</a-tag>
                      <a-tag color="red">多痰</a-tag>
                      <a-tag color="red">呼吸困难（特别是活动时）</a-tag>
                      <a-tag color="red">胸闷</a-tag>
                      <a-tag color="red">反复呼吸道感染</a-tag>
                    </a-space>
                    <a-divider />
                    <a-typography-title :heading="5">预防方法</a-typography-title>
                    <a-typography-paragraph>
                      <ul>
                        <li>戒烟（最重要的预防措施）</li>
                        <li>避免接触空气污染物</li>
                        <li>接种流感和肺炎疫苗</li>
                        <li>定期体检</li>
                      </ul>
                    </a-typography-paragraph>
                    <a-divider />
                    <a-typography-title :heading="5">治疗方法</a-typography-title>
                    <a-typography-paragraph>
                      <ul>
                        <li>支气管扩张剂</li>
                        <li>糖皮质激素吸入剂</li>
                        <li>肺康复训练</li>
                        <li>氧疗（重症患者）</li>
                        <li>戒烟</li>
                      </ul>
                    </a-typography-paragraph>
                  </a-col>
                  <a-col :span="8">
                    <div class="image-container">
                      <img src="../assets/images/lung-health/copd.png" alt="慢性阻塞性肺疾病" />
                    </div>
                  </a-col>
                </a-row>
              </a-card>
            </a-collapse-item>
            <a-collapse-item header="肺癌" key="4">
              <a-card>
                <a-row :gutter="24">
                  <a-col :span="16">
                    <a-typography-title :heading="4">肺癌</a-typography-title>
                    <a-typography-paragraph>
                      肺癌是起源于肺部组织的恶性肿瘤，是全球发病率和死亡率最高的恶性肿瘤之一。
                    </a-typography-paragraph>
                    <a-divider />
                    <a-typography-title :heading="5">主要症状</a-typography-title>
                    <a-space direction="vertical">
                      <a-tag color="red">持续咳嗽</a-tag>
                      <a-tag color="red">咯血</a-tag>
                      <a-tag color="red">胸痛</a-tag>
                      <a-tag color="red">呼吸困难</a-tag>
                      <a-tag color="red">体重减轻</a-tag>
                      <a-tag color="red">声音嘶哑</a-tag>
                    </a-space>
                    <a-divider />
                    <a-typography-title :heading="5">预防方法</a-typography-title>
                    <a-typography-paragraph>
                      <ul>
                        <li>戒烟（最重要的预防措施）</li>
                        <li>避免接触二手烟</li>
                        <li>避免接触工作场所致癌物质（如石棉、氡气等）</li>
                        <li>保持健康的生活方式</li>
                        <li>高危人群定期进行低剂量CT筛查</li>
                      </ul>
                    </a-typography-paragraph>
                    <a-divider />
                    <a-typography-title :heading="5">治疗方法</a-typography-title>
                    <a-typography-paragraph>
                      <ul>
                        <li>手术切除（早期肺癌）</li>
                        <li>放射治疗</li>
                        <li>化学治疗</li>
                        <li>靶向治疗</li>
                        <li>免疫治疗</li>
                        <li>综合治疗</li>
                      </ul>
                    </a-typography-paragraph>
                  </a-col>
                  <a-col :span="8">
                    <div class="image-container">
                      <img src="../assets/images/lung-health/lung-cancer.png" alt="肺癌" />
                    </div>
                  </a-col>
                </a-row>
              </a-card>
            </a-collapse-item>
          </a-collapse>
        </div>
      </a-tab-pane>

      <!-- 健康生活方式建议 -->
      <a-tab-pane key="3" title="健康生活方式">
        <div class="section-container">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-card class="lifestyle-card">
                <template #cover>
                  <div class="image-container">
                    <img src="../assets/images/lung-health/no-smoking.png" alt="戒烟" />
                  </div>
                </template>
                <a-typography-title :heading="4">戒烟</a-typography-title>
                <a-typography-paragraph>
                  吸烟是导致肺癌、慢阻肺等肺部疾病的主要危险因素。烟草中含有数千种有害物质，其中至少有69种已知的致癌物。
                </a-typography-paragraph>
                <a-typography-title :heading="5">戒烟建议：</a-typography-title>
                <a-typography-paragraph>
                  <ul>
                    <li>设定戒烟日期并告知亲友，寻求支持</li>
                    <li>考虑使用尼古丁替代疗法或戒烟药物</li>
                    <li>避免诱发吸烟欲望的场合和活动</li>
                    <li>寻求专业戒烟门诊的帮助</li>
                    <li>培养新的健康爱好替代吸烟</li>
                  </ul>
                </a-typography-paragraph>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card class="lifestyle-card">
                <template #cover>
                  <div class="image-container">
                    <img src="../assets/images/lung-health/air-quality.png" alt="空气质量" />
                  </div>
                </template>
                <a-typography-title :heading="4">空气质量</a-typography-title>
                <a-typography-paragraph>
                  长期暴露在污染的空气中会增加患肺部疾病的风险，包括哮喘、慢阻肺和肺癌。
                </a-typography-paragraph>
                <a-typography-title :heading="5">保护建议：</a-typography-title>
                <a-typography-paragraph>
                  <ul>
                    <li>关注空气质量指数，空气质量差时减少户外活动</li>
                    <li>在室内使用空气净化器</li>
                    <li>保持室内通风</li>
                    <li>避免在交通高峰期或交通繁忙的道路上锻炼</li>
                    <li>在空气污染严重时佩戴合适的口罩</li>
                  </ul>
                </a-typography-paragraph>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card class="lifestyle-card">
                <template #cover>
                  <div class="image-container">
                    <img src="../assets/images/lung-health/exercise.png" alt="运动" />
                  </div>
                </template>
                <a-typography-title :heading="4">规律运动</a-typography-title>
                <a-typography-paragraph>
                  适当的体育锻炼可以增强肺功能，提高肺活量，增强免疫力，降低患肺部疾病的风险。
                </a-typography-paragraph>
                <a-typography-title :heading="5">运动建议：</a-typography-title>
                <a-typography-paragraph>
                  <ul>
                    <li>每周进行至少150分钟的中等强度有氧运动</li>
                    <li>适合肺部健康的运动包括：散步、慢跑、游泳、骑自行车等</li>
                    <li>进行呼吸训练和胸部扩展运动</li>
                    <li>运动前做好热身，运动后做好放松</li>
                    <li>循序渐进，不要过度运动</li>
                  </ul>
                </a-typography-paragraph>
              </a-card>
            </a-col>
          </a-row>
          <a-divider />
          <a-row>
            <a-col :span="24">
              <a-card>
                <a-typography-title :heading="4">其他肺部健康生活方式建议</a-typography-title>
                <a-row :gutter="24">
                  <a-col :span="8">
                    <a-card class="mini-card">
                      <a-typography-title :heading="5">
                        <icon-experiment style="margin-right: 8px;" />均衡饮食
                      </a-typography-title>
                      <a-typography-paragraph>
                        摄入富含抗氧化物质的食物，如新鲜蔬果、全谷物、坚果等，有助于保护肺部健康。
                      </a-typography-paragraph>
                    </a-card>
                  </a-col>
                  <a-col :span="8">
                    <a-card class="mini-card">
                      <a-typography-title :heading="5">
                        <icon-mute style="margin-right: 8px;" />避免有害物质
                      </a-typography-title>
                      <a-typography-paragraph>
                        避免接触工作场所的有害物质，如石棉、粉尘、化学烟雾等，必要时佩戴防护装备。
                      </a-typography-paragraph>
                    </a-card>
                  </a-col>
                  <a-col :span="8">
                    <a-card class="mini-card">
                      <a-typography-title :heading="5">
                        <icon-calendar style="margin-right: 8px;" />定期体检
                      </a-typography-title>
                      <a-typography-paragraph>
                        定期进行肺功能检查和胸部影像学检查，特别是高危人群，有助于早期发现肺部疾病。
                      </a-typography-paragraph>
                    </a-card>
                  </a-col>
                </a-row>
                <a-row :gutter="24" style="margin-top: 16px;">
                  <a-col :span="8">
                    <a-card class="mini-card">
                      <a-typography-title :heading="5">
                        <icon-face-smile-fill style="margin-right: 8px;" />保持心理健康
                      </a-typography-title>
                      <a-typography-paragraph>
                        长期的精神压力和焦虑可能影响免疫系统功能，增加呼吸系统疾病风险。
                      </a-typography-paragraph>
                    </a-card>
                  </a-col>
                  <a-col :span="8">
                    <a-card class="mini-card">
                      <a-typography-title :heading="5">
                        <icon-sun-fill style="margin-right: 8px;" />保持适当湿度
                      </a-typography-title>
                      <a-typography-paragraph>
                        室内保持适当湿度（40%-60%），有助于保持呼吸道黏膜湿润，减少呼吸道感染风险。
                      </a-typography-paragraph>
                    </a-card>
                  </a-col>
                  <a-col :span="8">
                    <a-card class="mini-card">
                      <a-typography-title :heading="5">
                        <icon-heart style="margin-right: 8px;" />接种疫苗
                      </a-typography-title>
                      <a-typography-paragraph>
                        按时接种流感疫苗和肺炎球菌疫苗，特别是老年人、慢性疾病患者和免疫功能低下者。
                      </a-typography-paragraph>
                    </a-card>
                  </a-col>
                </a-row>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { 
  IconExperiment, 
  IconMute, 
  IconCalendar, 
  IconFaceSmileFill, 
  IconSunFill,
  IconHeart 
} from '@arco-design/web-vue/es/icon';

// 肺部解剖结构数据
const anatomyData = [
  {
    label: '气管',
    value: '连接喉部和支气管的管道，将空气输送到肺部。'
  },
  {
    label: '支气管',
    value: '气管分叉形成的管道，进一步分支形成细支气管。'
  },
  {
    label: '细支气管',
    value: '支气管的更细分支，最终连接到肺泡。'
  },
  {
    label: '肺泡',
    value: '肺部的基本功能单位，是气体交换的场所。'
  },
  {
    label: '肺叶',
    value: '左肺有2个肺叶（上叶和下叶），右肺有3个肺叶（上叶、中叶和下叶）。'
  },
  {
    label: '肺段',
    value: '每个肺叶又分为若干肺段，是肺部疾病诊断的基本单位。'
  },
  {
    label: '胸膜',
    value: '包裹肺脏的双层膜，内层紧贴肺表面，外层附着于胸腔内壁。'
  }
];
</script>

<style scoped>
.lung-health-container {
  padding: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.section-container {
  margin-top: 20px;
  margin-bottom: 40px;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-fill-1);
  padding: 16px;
}

.image-container img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.anatomy-card, .function-card, .lifestyle-card {
  height: 100%;
  margin-bottom: 24px;
}

.mini-card {
  height: 100%;
  border: 1px solid var(--color-border-2);
  transition: all 0.3s ease;
}

.mini-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-color: var(--color-border-3);
}

:deep(.arco-tabs-nav) {
  margin-bottom: 24px;
}

:deep(.arco-collapse-item-header) {
  font-size: 18px;
  font-weight: 500;
}

:deep(.arco-collapse-item) {
  margin-bottom: 16px;
  border-radius: 4px;
  overflow: hidden;
}

:deep(.arco-card) {
  border-radius: 4px;
}

:deep(.arco-tag) {
  margin: 4px;
}
</style>
